<template> 
  <div class="detail-container">
    <div v-show="orderInfo.status > 0">
      <el-steps :active="orderInfo.status" finish-status="success" align-center>
        <el-step title="提交订单" :description="orderInfo.createdTime"></el-step>
        <el-step title="支付订单" :description="orderInfo.payTime"></el-step>
        <el-step title="平台发货" :description="orderInfo.expressTime"></el-step>
        <el-step title="确认收货" :description="orderInfo.receivedTime"></el-step>
        <el-step title="完成评价" :description="overTime"></el-step>
      </el-steps>
    </div>
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">

        <span class="color-info" v-show="orderInfo.status <=3 && orderInfo.status > 0"> <i
          class="el-icon-info color-danger" style="margin-left: 20px"></i> 当前订单状态：{{ orderInfo.status | formatStatus }}</span>
        <span class="color-danger" v-show="orderInfo.status==0"> <i class="el-icon-error color-danger"
                                                                    style="margin-left: 20px"></i>  当前订单状态：{{
            orderInfo.status | formatStatus
          }} </span> <span style="float: right;clear: right;margin-right: 2em;" v-show="orderInfo.status==0"> 创建时间： {{
          orderInfo.createdTime
        }} | 取消时间 {{ orderInfo.cancelTime }}</span>
        <span class="color-success" v-show="orderInfo.status > 3">当前订单状态：{{ orderInfo.status | formatStatus }}</span>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">订单编号</el-col>
          <el-col :span="4" class="table-cell-title">用户账号</el-col>
          <el-col :span="4" class="table-cell-title">支付方式</el-col>
          <el-col :span="4" class="table-cell-title">商品种类</el-col>
          <el-col :span="8" class="table-cell-title">买家备注</el-col>

        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{ orderInfo.outTradeNo }}</el-col>
          <el-col :span="4" class="table-cell">{{ user.username }}</el-col>
          <el-col :span="4" class="table-cell">支付宝</el-col>
          <el-col :span="4" class="table-cell">{{ orderInfo.details.length }}</el-col>
          <el-col :span="8" class="table-cell">{{ orderInfo.note }}</el-col>

        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">收货人信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">收货人</el-col>
          <el-col :span="6" class="table-cell-title">手机号码</el-col>

          <el-col :span="12" class="table-cell-title">收货地址</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{ orderInfo.receiver }}</el-col>
          <el-col :span="6" class="table-cell">{{ orderInfo.tel }}</el-col>
          <el-col :span="12" class="table-cell">{{ orderInfo.address }}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px" v-show="orderInfo.status > 2">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">物流信息</span>
      </div>
      <div class="table-layout" v-show="orderInfo.status > 2">
        <el-row>

          <el-col :span="8" class="table-cell-title">快递公司</el-col>

          <el-col :span="16" class="table-cell-title">快递单号</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">{{ orderInfo.expressCompany }}</el-col>
          <el-col :span="16" class="table-cell">{{ orderInfo.express }}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">商品信息</span>
      </div>
      <el-table
        ref="orderItemTable"
        :data="orderInfo.details"
        style="width: 100%;margin-top: 20px" border>
        <el-table-column label="商品图片" width="120" align="center">
          <template slot-scope="scope">
            <img :src="$store.getters.store+scope.row.book.img" style="height: 80px">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.book.name }}</p>
            <p>分类：{{ rowCate(scope.row.book.categoryId) }}</p>
            <p>科目：{{ rowSubject(scope.row.book.subjectId) }} </p>
          </template>
        </el-table-column>
        <el-table-column label="评论" v-show="" width="140" align="center">
          <template slot-scope="scope">
            {{ scope.row.comment | getContent }}
            <p v-show="scope.row.comment!=null">
              评分： {{ getRate(scope.row.comment) }}
            </p>
          </template>
        </el-table-column>

        <el-table-column label="单价" width="120" align="center">
          <template slot-scope="scope">
            ￥ {{ scope.row.price.toFixed(2) }}
          </template>
        </el-table-column>

        <el-table-column label="数量" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.count }}
          </template>
        </el-table-column>
        <el-table-column label="小计" width="120" align="center">
          <template slot-scope="scope">
            ￥{{ (scope.row.price * scope.row.count).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right;margin: 20px">
        合计：<span class="color-danger">￥{{ orderInfo.price.toFixed(2) }}</span>
      </div>


    </el-card>
  </div>
</template>
<script>
import {
  getOrderDetail
} from '@/api/order';
import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';

import VDistpicker from 'v-distpicker';
import {getCategoryListAll, getSubjectAll} from "@/api/product";

const defaultOrder = {
  id: null,
  outTradeNo: null,
  price: null,
  receiver: null,
  address: null,
  tel: null,
  express: null,
  status: 0,
  user: {},
  expressTime: null,
  payTime: null,
  receivedTime: null,
  cancelTime: null,
  createdTime: null,
  note: null,
  expressCompany: '',
  details: []
};
const defaultReceiverInfo = {}
export default {
  name: 'orderDetail',
  components: {VDistpicker, LogisticsDialog},
  data() {
    return {
      id: null,
      orderInfo: Object.assign({}, defaultOrder),
      cateList: [],
      subjectList: [],
      user: {},
      overTime: '',
    }
  },

  created() {
    this.id = this.list = this.$route.query.id;
    getSubjectAll().then(res => {
      this.subjectList = res.data;
    })
    getCategoryListAll().then(res => {
      this.cateList = res.data;
    })
    getOrderDetail(this.id).then(response => {
      this.orderInfo = response.data.order
      this.user = response.data.user
      if (!this.orderInfo.note)
        this.orderInfo.note = '无备注'
    }).then(() => {
      if (this.orderInfo.status > 4)
        this.overTime = this.getOverTime()
    });

  },
  filters: {
    getContent(val) {
      if (val)
        return val.content
      else
        return '暂无评论'
    },
    formatStatus(value) {
      if (value === 0)
        return "已取消"
      if (value === 1)
        return "待付款"
      if (value === 2) {
        return '待发货';
      } else if (value === 3) {
        return '待收货';
      } else if (value >= 4) {
        return '已完成';
      } else {
        return '未获取到订单详情';
      }
    },
  },
  methods: {
    getRate(comment) {
      if (comment)
        return comment.star
    },
    getOverTime() {

      if (this.orderInfo.status > 4) {
        const details = this.orderInfo.details
        const reduce = details.reduce((res, cur) => {

          if (cur.comment) {

            if (cur.comment.createdTime > res.comment.createdTime)
              return cur;
            else
              return res;
          }
        }, details[0]);

        return reduce.comment.createdTime
      }
    },
    rowSubject(val) {
      const filter = this.subjectList.filter(item => item.id == val);
      if (filter.length > 0)
        return filter[0].name
    },
    rowCate(val) {
      const cateArr = []
      const filter = this.cateList.filter(item => item.id === val);
      if (filter && filter.length > 0 && filter[0] !== undefined) {
        cateArr.unshift(filter[0].name);
        if (filter[0].parentId !== 0) {
          this.appendCateFather(cateArr, filter[0].parentId)
        }
      }
      if (cateArr.length > 1) {
        return cateArr.join(' | ')
      } else if (cateArr.length === 1) {
        return cateArr[0]
      }
      return '';
    },
    appendCateFather(cateArr, val) {
      const filter = this.cateList.filter(item => item.id === val);
      if (filter && filter.length > 0 && filter[0] !== undefined) {
        cateArr.unshift(filter[0].name);
        if (filter[0].parentId !== 0) {
          this.appendCateFather(cateArr, filter[0].parentId)
        }
      }
    },

  }
}
</script>
<style scoped>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #F2F6FC;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>


